.slider-component {
    width: 100%;
    height: 34px;
    padding: 0;
    overflow: hidden;

    .slider-outer {
        height: inherit;
        border-radius: 6px;
        display: flex;
        align-items: center;
        position: relative;
    }

    .slider-outer-button {
        position: relative;
        width: 98.5px;
        height: inherit;
        background-color: #5961f9;
        padding: 2px;
        border-radius: 16px;
        cursor: pointer;
        transition: background-color 0.3s;

        &:hover {
            background-color: var(--xfxjPrimary);
        }

        .slider-inner-button {
            width: 100%;
            height: 100%;
            border-radius: 16px;
            white-space: nowrap;
            background: #282828;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: var(--xfxjSelectText);
        }
    }
}
